<template>
	<view>详情</view>
	<FooterButton :button="state.button" />
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { onMounted, reactive, computed } from "vue";
import { useStore } from "vuex"
import { useDict } from "@/dict/index.js"
import { bookdetailed, borrowBook } from "@/api/book"
import FooterButton from "@/components/footerButton/index.vue"
// store
const store = useStore()
// 字典
const userStatusOptions = useDict('userStatusOptions')
// 用户状态
const userStatus = computed(() => {
	const value = store.state.app.userStatus
	return userStatusOptions?.useDictItem(value) || null
})

const state = reactive({
	query: {},
	button: [
		{ 
			label: userStatus.value?.authLabel, 
			type: "success",
			disabled: userStatus.value?.disabled,
			beforeChange: () => handleBorrowBook()
		},
	],
	detailed: {}
})

const handleBorrowBook = () => {
	return new Promise((resolve, reject) => {
		borrowBook({book_id: state.detailed.book_id}).then(() => {
			wx.showToast({
				title: "借阅成功",
				icon: "succss",
				success: () => {
					wx.navigateTo({
					  url: '/pages/borrowBook/index',
					})
				}
			})
			resolve()
		}).catch(() => {
			reject()
		})
	})
}


const getDetailed = () => {
	bookdetailed(state.query.id).then(res => {
		state.detailed = res.content
	})
}

onLoad((options) => {
	state.query = options
})

onMounted(() => {
	getDetailed()
})
</script>

<style>
</style>